import LiveOver from '@/assets/over.png'
import { useRequest } from 'ahooks'
import Link from 'next/link'
import { useState } from 'react'
import styles from '../style/Liveover.module.scss'
import { getSlideVideoBack } from '@/server/news'
import RenderJudge from '@/components/RenderJudge'
import classNames from 'classnames'
const Liveover = ({ data, isLive, mobile }) => {
  const [live, setLive] = useState([])
  useRequest(() => getSlideVideoBack({ type: 2, num: 3 }), {
    onSuccess: (res) => {
      setLive(res)
    },
    ready: isLive && data?.length === 0
  })
  if (isLive && data?.length === 0) {
    return (
      <section className={classNames(styles.Liveover, mobile ? styles.h5over : null)}>
        <p>
          <img src={LiveOver?.src} alt="" />
          <span>直播已结束</span>
        </p>

        <RenderJudge value={mobile} inactive={
          <>
            <span>直播推荐</span>
            <section>
              {
                live?.map(row => (
                  <Link href={`/marvellous/${row?.id}`} key={row}>
                    <a>
                      <img src={row?.coverImg} alt="" />
                      <p className='textoverone'>{row?.title}</p>
                    </a>
                  </Link>
                ))
              }
            </section>
          </>
        } />
      </section>
    )
  }
  return <></>
}

export default Liveover